"use client"

import { useEffect, useState } from "react"
import dynamic from "next/dynamic"
import { Loader2 } from "lucide-react"
import { GraphData } from "../types"

const DynamicCosmograph = dynamic(
  () => import("@cosmograph/react").then((mod) => mod.Cosmograph),
  { ssr: false, loading: () => <LoadingState /> }
)

const LoadingState = () => (
  <div className="flex flex-col items-center justify-center py-8">
    <Loader2 className="h-8 w-8 animate-spin text-primary mb-4" />
    <p>加载中...</p>
  </div>
)

export function GraphVisualization({ data }: { data: GraphData }) {
  const [mounted, setMounted] = useState(false)

  useEffect(() => {
    setMounted(true)
  }, [])

  if (!mounted) {
    return <LoadingState />
  }

  return (
    <div className="h-[600px] w-full border rounded-lg overflow-hidden">
      <DynamicCosmograph
        nodes={data.cosmographData.nodes}
        links={data.cosmographData.links}
        nodeColor={(node: any) => node.color || "#4285F4"}
        nodeSize={(node: any) => node.size || 5}
        backgroundColor="#ffffff"
        linkColor="#999"
        linkWidth={1}
        showHoveredNodeLabel={true}
        nodeLabelAccessor={(node: any) => node.label}
      />
    </div>
  )
} 